<template>
  <div class="advertisement-frame">
    <!-- 首页听课轮播 -->
    <CarouselComponent
      :items="carouselItems"
      @image-load="onImageLoad"
      :index="0"
      @onlineClassListening="onlineClassListening"
      @change="handleCarouselChange"
    />

    <!-- 首页认证轮播 -->
    <CarouselComponent
      :items="carouselItems2"
      @image-load="onImageLoad"
      :index="1"
      @onlineClassListening="onlineClassListening"
      @change="handleCarouselChange"
    />
  </div>

  <qrCodeDialog
    v-model:centerDialogVisible="centerDialogVisible"
    ref="qrCodeRef"
    :carouseIndex="carouseIndex"
    style="width: 438px"
  />
</template>

<script setup>
import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue';
import CarouselComponent from './carouselComponent.vue';

import qrCodeDialog from '@/views/components/qrCodeDialog/index.vue';
const qrCodeRef = ref(null);
const centerDialogVisible = ref(false);
const carouseIndex = ref(0);
function open(id, index) {
  carouseIndex.value = index;
  centerDialogVisible.value = true;
}

// 接受子组件传递的事件
const onlineClassListening = (id, index) => {
  open(id, index);
};

const carouselItems = ref([
  {
    parentId: 37,
    id: 52,
    title: '生涯成果展1',
    subTitle: '规划师研修2',
    linkText: '在线听课',
    downText: '下载资料',
    index: 0,
    imageSrc:
      'https://i5.youzy.cn/util4y/media/files/20241105/a9925c19c7a347d8940609d673c50ad2_BSA后台邀请函(1).jpg',
    infoTitle: '2024生涯教育成果展开启招募啦1',
    speaker: '主讲人:关工委、优志愿',
  },
]);

const carouselItems2 = ref([
  {
    parentId: 37,
    id: 52,
    title: '生涯成果展',
    subTitle: '规划师研修',
    linkText: '考试入口',
    downText: '下载资料',
    index: 1,
    imageSrc:
      'https://i5.youzy.cn/util4y/media/files/20241105/a9925c19c7a347d8940609d673c50ad2_BSA后台邀请函(1).jpg',
    infoTitle: '2024生涯教育成果展开启招募啦1',
    speaker: '主讲人:关工委、优志愿',
    // 轮播图考试入口
    cuccpExamList: [
      {
        name: '高考志愿咨询认证',
        url: 'http://www.cuccp.cn/doexam/9dLljdj2yDQ.html',
      },
      {
        name: '生涯规划师认证',
        url: 'http://www.cuccp.cn/doexam/aJLVJYJvLQr.html',
      },
      {
        name: '升学规划咨询师认证',
        url: 'http://www.cuccp.cn/doexam/6Ye1VXaDy0d.html',
      },
      {
        name: '优志愿机构版技能认证',
        url: 'http://www.cuccp.cn/doexam/aJLVJYl7LQr.html',
      },
    ],
  },
]);

// 最大宽度对应的高度
const maxWidth = 1780;
const maxHeight = 417;

// 动态计算高度
const calculateHeight = (windowWidth) => {
  if (windowWidth >= maxWidth) {
    return maxHeight;
  }
  const ratio = maxHeight / maxWidth;
  return windowWidth * ratio + 165;
};

const setCarouselHeight = () => {
  const windowWidth = window.innerWidth;
  const height = calculateHeight(windowWidth);
  const carouselContainers = document.querySelectorAll(
    '.el-carousel__container'
  );
  carouselContainers.forEach((container) => {
    container.style.height = `${height}px`;
  });
};

const onImageLoad = () => {
  setCarouselHeight();
};

const handleCarouselChange = async () => {
  await nextTick();
  setCarouselHeight();
};

onMounted(() => {
  setCarouselHeight();
  window.addEventListener('resize', setCarouselHeight);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', setCarouselHeight);
});
</script>

<style scoped lang="scss" src="./index.scss"></style>
